<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>Title</title>
    <style>
        .p a{
            width: 40px;
            height: 40px;
            display: inline-block;
            line-height: 40px;
            text-align: center;
            border-radius: 50%;
            background-color: aqua;
            color: darkorange;
            font-size: 6px;
        }
        .p a:hover{
            background-color: aquamarine;
            color: coral;
        }
        #ding{
            position: fixed;
            bottom: 0px;
            left: 0px;
            right: 0px;
            margin: 0px;
            background-color: white;
        }
    </style>
</head>
<body>
<form id="f1" action="${pageContext.request.contextPath}/ss/pageByCond" method="post">
<input type="hidden" name="page" value="1" id="page1"/>
    <input type="hidden" name="size"  value="5" id="size1"/>
    <p style="text-align: center">
        姓名:<input id="username" type="text" name="username" size="25px" value="${param.username}"/>
        性别:<input  type="radio" name="gender" value="1"
        ${param.gender == '1'?'checked':''}
        />男
        <input type="radio" name="gender" value="0"
        ${param.gender == '0'?'checked':''}
        />女
        <input id="gender" type="radio" name="gender" value=""
        ${ empty param.gender ?'checked':''}
        />男女都查

        城市:
        <select name="city" id="city">
            <option value="" ${param.city == ''?'selected':''}>无</option>
            <option value="shijiazhuang"
            ${param.city == 'shijiazhuang'?'selected':''}
            >石家庄</option>
            <option value="beijing"
            ${param.city == 'beijing'?'selected':''}
            >北京</option>
            <option value="shanghai"
            ${param.city == 'shanghai'?'selected':''}
            >上海</option>
            <option value="newYork"
            ${param.city == 'newYork'?'selected':''}
            >纽约</option>
        </select>

        <input type="button" value="条件查询" onclick="tiao(1)">
        <input type="button" value="重置" onclick="bbb()">

    </p>
</form>
    <table border="1" cellspacing="0" cellpadding="10" align="center">
        <tr>
            <th>序号</th>
            <th>用户名</th>
            <th>性别</th>
            <th>爱好</th>
            <th>城市</th>
            <th>介绍</th>
        </tr>

       <c:forEach items="${requestScope.page.list}" var="user" varStatus="stat">
           <tr>
               <td>${ (page.page-1)*page.size+stat.index + 1}</td>
               <td>${user.username}</td>
               <td>${user.gender}</td>
               <td>${user.hobby}</td>
               <td>${user.city}</td>
               <td> <c:out value="${user.introduce}"/> </td>
           </tr>
       </c:forEach>
    </table>

<p id="ding" class="p" style="text-align: center;">一共${page.total}条数据 一共${page.last}页 每页显示 <select onchange="tiao(1)" name="size" id="sizeId">
    <option value="2" ${page.size == '2'?'selected':''}>2</option>
    <option value="5" ${page.size == '5'?'selected':''}>5</option>
    <option value="10" ${page.size == '10'?'selected':''}>10</option>
    <option value="20" ${page.size == '20'?'selected':''}>20</option>
</select> 条数据

    <a href="javaScript:void(0);" onclick="tiao(1)">首页</a>

    <a href="javaScript:void(0);" onclick="tiao(${page.prve})">上一页</a>

    <c:forEach begin="${page.start}" end="${page.end}" var="num">
        <c:if test="${num==page.page}">
            ${num}
        </c:if>
        <c:if test="${num!=page.page}">
            <a href="javaScript:void(0);" onclick="tiao(${num})">${num}</a>
        </c:if>
    </c:forEach>
    <a href="javaScript:void(0);" onclick="tiao(${page.next})">下一页</a>
    <a href="javaScript:void(0);" onclick="tiao(${page.last})">尾页</a>
    跳转到 <input value="${page.page}" type="number" max="20" min="1" step="1" name="page" id="page" onchange="huan(this)"/> 页 </p>
</body>
<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.min.js"></script>
<script>
    function tiao(page) {
        var select = document.getElementById("sizeId");
        var size = select.value;
        document.getElementById("page1").value=page;
        document.getElementById("size1").value=size;
        var form= document.getElementById("f1");
        form.submit();
        /*location.assign("${pageContext.request.contextPath}/page?page="+page+"&size="+size);*/
    }

        function huan(obj) {
           var page =  obj.value;
           if(page > ${page.last}){
               page = ${page.last}
           }
           tiao(page);
        }
            function bbb() {
            document.getElementById("username").value = "";
            $("#gender").prop("checked",true);
            document.getElementById("city").value = "";
        }
</script>

</html>
